<template>
    <div class="home">
        <!-- 首页轮播 -->
        <home-swipe :carouselItems="carouselItems"></home-swipe>
 
        <!-- 首页功能快捷入口 Grid宫格-->
        <home-enter></home-enter>
 
        <!-- 商品推荐 -->
        <home-product :productItems="recommendedItems" title="商品推荐" icon="gift-o"></home-product>
       
        <!-- 新品上架 -->
        <home-product :productItems="newArrialItems" title="新品上架" icon="vip-card-o"></home-product>
       
        <!-- 销售排行 -->
        <home-product :productItems="topSaleItems" title="销售排行" icon="award-o"></home-product>
       
    </div>
</template>
 
<script>
    //导入封装后的首页接口
    import * as HomeAPI from "@/api/home.js"
   
    import HomeSwipe from "./components/HomeSwipe.vue"
    import HomeEnter from "./components/HomeEnter.vue"  
    import HomeProduct from "./components/HomeProduct.vue"
   
    export default {
        name: 'home',
        components: {
            HomeSwipe,HomeEnter,HomeProduct
        },
 
        data() {
            return {
                carouselItems: [], //轮播图
                recommendedItems: [], //商品推荐        
                newArrialItems: [], //新品上架      
                topSaleItems: [], //销售排行        
            }
        },
 
        // 生命周期钩子-实例创建后,可以用this.*
        created() {
            //2.使用封装后的接口
            HomeAPI.getHomeDataAPI().then(result => {
                console.log(result); //控制台调式输出
                this.carouselItems = result.data.carouselItems; //保存API调用的返回的轮播数据           
                this.recommendedItems = result.data.recommendedItems; //保存首页商品推荐数据
                this.newArrialItems = result.data.newArrialItems; //保存首页新品上架    数据
                this.topSaleItems = result.data.topSaleItems; //保存首页销售排行数据              
            });
        },      
    }
</script>
<style scoped>  
</style>
